<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div id="overview-mapmain">
    <div class="overview-mode-pannel" v-loading="mapLoad">
      <el-amap
        vid="overview-amap"
        ref="map"
        resizeEnable="true"
        :plugin="plugin"
        :amap-manager="amapManager"
        :center="center"
        :zoom="zoom"
        :events="events"
        class="mapset"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          :vid="index"
          :events="marker.events"
        >
          <div class="map-marker-wrapn">
            <!-- <div class="main-map-markern"
              :class="{'main-map-marker__normaln': marker.status=='离线', 'main-map-marker__notify': marker.status=='报警'}">
            </div>-->
            <div
              class="hymain-map-marker"
              :class="{
                'hymain-map-marker__normal': marker.status == '离线',
                'hymain-map-marker__normal': marker.status == '报警',
                'hymain-map-marker__yel': marker.status == '故障',
                'hymain-map-marker__green': marker.status == '正常'
              }"
            >
              <icon-svg
                v-show="marker.type == '2'"
                icon-class="xiaofangshuan"
                style="fill: #ffffff"
              />
            </div>
            <p class="bubble">
              <i class="build-name">{{ marker.name }}</i>
              <i class="arrow-up"></i>
            </p>
          </div>
        </el-amap-marker>
      </el-amap>
    </div>
    <!-- 边框组件 -->
    <div class="borderContent">
      <div class="borderContent_type">
        <BorderType :title="'设备实时状态'">
          <div class="border_message">
            <div class="border_message_num">
              <BorderType2
                :num="realstatusCount.callCount"
                :type="'报警'"
                :color="'bottom,#FF6574,#FA4F6C,#F53563'"
              ></BorderType2>
            </div>
            <div class="border_message_num">
              <BorderType2
                :num="realstatusCount.callCount"
                :type="'故障'"
                :color="'bottom,#F8BA67,#E69E3F,#D58824'"
              ></BorderType2>
            </div>
            <div style="margin-top: 10px" class="border_message_num">
              <BorderType2
                :num="realstatusCount.offCount"
                :type="'离线'"
                :color="'bottom,#87DCFE,#4EC6FE,#02A4F9'"
              ></BorderType2>
            </div>
            <div style="margin-top: 10px" class="border_message_num">
              <BorderType2
                :num="realstatusCount.normalCount"
                :type="'正常'"
                :color="'bottom,#63FC92,#4AFBA5,#37FFB8'"
              ></BorderType2>
            </div>
          </div>
        </BorderType>
      </div>

      <div class="borderContent_bottom">
        <BorderType3 :title="'近7天隐患处理情况'">
          <div class="border_message">
            <div
              style="width: 100%; height: 180px; margin: -50px 0 -50px 0"
              id="piechart"
            ></div>
          </div>
          <div class="border_message2">
            <div class="borderType_title">近7天报警发生情况</div>
            <div style="width: 100%; height: 130px" id="alarmchart"></div>
          </div>
          <div class="border_message2">
            <div class="borderType_title">近7天故障发生情况</div>
            <div style="width: 100%; height: 130px" id="breakchart"></div>
          </div>
        </BorderType3>
      </div>
      <br />
    </div>
  </div>
</template>
<script>
import {
  getAllCount,
  getPiechart,
  getalram,
  getabnormal,
  getMapData,
  getAllBuildingStatus
} from "@/api/overview/index";
import BorderType from "@/components/BorderType/border3.vue";
import BorderType2 from "@/components/BorderType/border2.vue";
import BorderType3 from "@/components/BorderType/index.vue";
import { AMapManager } from "vue-amap";
import echarts from "echarts";
let amapManager = new AMapManager();
export default {
  components: {
    BorderType,
    BorderType2,
    BorderType3
  },
  data() {
    let self = this;
    return {
      amapManager: amapManager,
      center: [114.42377, 30.50469],
      zoom: 5,
      isClosed: false,
      realstatusCount: {},
      piechardt: {},
      markers: [],
      markerRefs: [],
      mapLoad: true,
      // slotStyle:{
      //   width:'40px',
      //   borderRadius:'50%',
      //   lineHeight:'40px',
      //   textAlign:'center',
      //   color:'#fff',
      //   background:'rgb(244, 233, 37,.6)',
      // },
      plugin: [
        {
          pName: "CitySearch",
          // showMarker:false,
          events: {
            init(o) {}
          }
        },
        {
          pName: "Scale",
          events: {}
        }
      ],
      events: {
        init: o => {
          o.setMapStyle("amap://styles/117f36d1e643cfd46d21660d866df29e");
          // 点聚合功能
          setTimeout(() => {
            let cluster = new AMap.MarkerClusterer(o, self.markerRefs, {
              gridSize: 80,
              minClusterSize: 2,
              maxZoom: 17,
              renderCluserMarker: self._renderCluserMarker
            });
            self.mapLoad = false;
          }, 2000);
        }
      }
    };
  },
  mounted() {
    let mapmainHeight = document
      .querySelector(".sidebar-container")
      .getBoundingClientRect().height;
    document.querySelector("#overview-mapmain").style.height =
      mapmainHeight + "px";
    //图表加载
    this.getPiechartData();
    this.getAlarmdata();
    this.getAbnormaldata();
  },
  created() {
    //修复高德地图加载的bug
    if (localStorage.getItem("logined")) {
      let addStorage = localStorage.getItem("logined");
      this.clearMapstore();
      localStorage.setItem("logined", addStorage);
    } else {
      this.clearMapstore();
    }
    this.getStatusCount();
    // this.getMapCluster();
    this.getBuildingStatus();
  },
  methods: {
    // 获取所有建筑物状态
    getBuildingStatus() {
      let self = this;
      getAllBuildingStatus().then(res => {
        if (res.status === 200) {
          let markers = [];
          this.markers = res.data;
          for (let i = 0; i < this.markers.length; i++) {
            if (this.markers[i].gis) {
              markers.push({
                position: [
                  Number(this.markers[i].gis.split(",")[0]),
                  Number(this.markers[i].gis.split(",")[1])
                ],
                id: this.markers[i].id,
                status: this.markers[i].status,
                type: this.markers[i].type,
                name: this.markers[i].name,
                events: {
                  init(o) {
                    self.markerRefs.push(o);
                  }
                }
              });
            }
          }
          this.markers = [];
          this.markers = markers;
        }
      });
    },
    // 获取地图数据
    getMapCluster() {
      let self = this;
      let markers = [];

      getMapData().then(res => {
        let clsdata = res.data;
        for (let i = 0; i < clsdata.length; i++) {
          markers.push({
            position: [
              Number(clsdata[i].gis.split(",")[0]),
              Number(clsdata[i].gis.split(",")[1])
            ],
            content:
              '<div class="circelanimate" style="text-align:center; color:hsl(0, 0%, 100%); line-height:40px; background-color: hsla(32, 100%, 41%, 0.7); height: 40px; width: 40px; border: 1px solid hsl(32, 100%, 41%); border-radius: 20px; box-shadow: hsl(180, 100%, 98%) 0px 0px 1px;">' +
              clsdata[i].count +
              "</div>",
            count: clsdata[i].count,
            events: {
              init(o) {
                self.markerRefs.push(o);
              }
            }
          });
        }
        this.markers = markers;
      });
    },
    /* _renderCluserMarker (context) {
      const count = this.markers.length;

      let factor = Math.pow(context.count / count, 1 / 18)
      let div = document.createElement('div');
      let Hue = 180 - factor * 180;
      let bgColor = 'hsla(53, 100%, 41%, 0.7)';
      //let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
      let fontColor = 'hsla(0,0%,100%,1)';
      let borderColor = 'hsla(53, 100%, 41%, 1)';
      let shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
      div.style.backgroundColor = bgColor
      let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + 'px';
      div.style.border = 'solid 1px ' + borderColor;
      div.style.borderRadius = size / 2 + 'px';
      div.style.boxShadow = '0 0 1px ' + shadowColor;
      // div.innerHTML = context.count;
      div.innerHTML = '';
      div.style.lineHeight = size + 'px';
      div.style.color = fontColor;
      div.style.fontSize = '14px';
      div.style.textAlign = 'center';
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div)
    }, */
    _renderCluserMarker(context) {
      // 点聚合方法
      const count = this.markers.length;

      let factor = Math.pow(context.count / count, 1 / 18);
      let div = document.createElement("div");
      let Hue = 180 - factor * 180;
      // let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
      // let fontColor = 'hsla('+Hue+',100%,20%,1)';
      // let borderColor = 'hsla('+Hue+',100%,40%,1)';
      // let shadowColor = 'hsla('+Hue+',100%,50%,1)';
      let bgColor = "hsla(153,100%,33%,0.7)";
      let fontColor = "hsla(0,0%,100%,1)";
      let borderColor = "hsla(153,100%,40%,1)";
      let shadowColor = "hsla(" + Hue + ",100%,50%,1)";
      div.style.backgroundColor = bgColor;
      let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + "px";
      div.style.border = "solid 1px " + borderColor;
      div.style.borderRadius = size / 2 + "px";
      div.style.boxShadow = "0 0 1px " + shadowColor;
      div.innerHTML = context.count;
      div.style.lineHeight = size + "px";
      div.style.color = fontColor;
      div.style.fontSize = "14px";
      div.style.textAlign = "center";
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div);
    },
    getStatusCount() {
      getAllCount().then(res => {
        this.realstatusCount = res.data;
      });
    },
    getPiechartData() {
      getPiechart().then(res => {
        this.piechardt = res.data;
        this.pieChart();
      });
    },
    getAlarmdata() {
      getalram().then(res => {
        this.alarmchart2("alarmchart", res.data);
      });
    },
    getAbnormaldata() {
      getabnormal().then(res => {
        this.alarmchart("breakchart", res.data);
      });
    },
    toggleClose() {
      //切换展开
      this.isClosed = !this.isClosed;
    },
    pieChart() {
      let piechardt = this.piechardt;
      let ayarr = [
        { value: piechardt.count, name: "未处理" },
        { value: piechardt.handleCount, name: "已处理" }
      ];
      console.log("ayarr", ayarr);
      let stringarr = ["未处理", "已处理"];

      let chart = echarts.init(document.getElementById("piechart"));
      let title1 =
        (piechardt.count / (piechardt.count + piechardt.handleCount)) * 100;
      let option = {
        title: [
          {
            text: title1 + "%",
            left: "20%",
            y: "center",
            textStyle: {
              fontFamily: "PangMenZhengDao",
              fontWeight: "normal",
              textShadowColor: "#5D85FF",
              textShadowBlur: 6,
              color: "#33EBF5",
              fontSize: "15"
            }
          },
          {
            text: 100 - title1 + "%",
            left: "33%",
            y: "center",
            textStyle: {
              fontFamily: "PangMenZhengDao",
              fontWeight: "normal",
              textShadowColor: "#5D85FF",
              textShadowBlur: 6,
              color: "#F184F1",
              fontSize: "15"
            }
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: "30",
          top: "center",
          data: stringarr,
          icon: "circle",
          // color: ["#33EBF5", "#F184F1"],
          textStyle: {
            color: "#D3D9E4"
          }
        },
        // color: ["transparent"],
        inverse: true,
        series: [
          {
            name: "未处理",
            type: "pie",
            radius: ["100%", "90%"],
            startAngle: 180,
            clockwise: false,
            center: ["30%", "40%"],
            label: {
              show: false
            },
            itemStyle: {
              color: "#33EBF5"
            },
            data: [
              {
                value: piechardt.count,
                itemStyle: {
                  color: "#33EBF5"
                }
              },
              {
                value:
                  (piechardt.count + piechardt.handleCount) * 2 -
                  piechardt.count,
                silent: true,
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: "center"
                    },
                    labelLine: {
                      show: false
                    },
                    color: "rgba(0, 0, 0, 0)",
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0
                  }
                }
              }
            ]
          },
          {
            name: "已处理",
            type: "pie",
            radius: ["80%", "70%"],
            startAngle: 180,
            clockwise: false,
            center: ["30%", "40%"],
            label: {
              show: false
            },
            itemStyle: {
              color: "#F184F1"
            },
            data: [
              {
                value: piechardt.handleCount,
                itemStyle: {
                  color: "#F184F1"
                }
              },
              {
                value:
                  (piechardt.count + piechardt.handleCount) * 2 -
                  piechardt.handleCount,
                silent: true,
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: "center"
                    },
                    labelLine: {
                      show: false
                    },
                    color: "rgba(0, 0, 0, 0)",
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0
                  }
                }
              }
            ]
          }
        ]
      };
      chart.setOption(option);
    },
    alarmchart(el, data) {
      let chart = echarts.init(document.getElementById(el));
      let color = ["#E5911F"];
      // let echartData = data;
      // console.log('echartData', echartData)
      let xAxisData = data.dateList;
      let yAxisData1 = data.countList;
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };

      let option = {
        color: color,
        grid: {
          left: 20,
          right: 40,
          bottom: 20,
          top: 20,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);color: #333;",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "#ffffff",
              shadowColor: "rgba(225,225,225,1)",
              shadowBlur: 2
            }
          }
        },
        textStyle: {
          //全局字体样式
          color: "rgba(80, 227, 194, 0.7)"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#2bdef5"
            }
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100
          }
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "#F2F3F6"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#73BFE6"
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            axisLabel: {
              textStyle: {
                color: "#73BFE6"
              }
            },
            nameTextStyle: {
              color: "#73BFE6",
              fontSize: 12,
              lineHeight: 40
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "rgba(80, 227, 194, 0.7)"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#F2F3F6"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "",
            type: "line",
            smooth: true,
            showSymbol: false,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 4
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 5
              }
            },
            data: yAxisData1
          }
        ]
      };
      chart.setOption(option);
    },
    alarmchart2(el, data) {
      let chart = echarts.init(document.getElementById(el));
      let option = {
        grid: {
          left: 45,
          right: 40,
          bottom: 20,
          top: 20
        },
        textStyle: {
          //全局字体样式
          color: "rgba(80, 227, 194, 0.7)"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#2bdef5"
            }
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100
          }
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: data.dateList,
            axisLine: {
              lineStyle: {
                color: "#73BFE6"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#F2F3F6"
              }
            }
          }
        ],
        yAxis: [
          {
            name: "",
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#73BFE6"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#F2F3F6"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.7)"
              }
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            showAllSymbol: true,
            barWidth: 15,
            sampling: "average",
            itemStyle: {
              normal: {
                color: "#FD5F72",
                lineStyle: {
                  color: "#FD5F72"
                }
              }
            },
            data: data.countList
          }
        ]
      };
      chart.setOption(option);
    }
  }
};
</script>
<style lang="scss">
@keyframes warn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.circelanimate {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    left: -60px;
    top: -60px;
    border: 80px solid #d26f00;
    border-radius: 80px;
    z-index: 1;
    opacity: 0;
    animation: warn 3s ease-out;
    animation-iteration-count: infinite;
  }
}
.left-plan-pannel {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  width: 410px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0px);
  transition: all 0.3s;
  .plan-close-btn {
    z-index: 9;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: -4px;
    width: 22px;
    height: 0;
    border-top: 14px solid #a4cdff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transform: rotate(90deg);
    .el-icon-arrow-left {
      color: #2683f5;
      transform: rotate(-90deg) translateX(15px);
    }
  }
  &.plan-pannel-close {
    transform: translateX(-410px);
    transition: all 0.3s;
    .plan-close-btn {
      transform: rotate(-90deg) translateY(15px);
    }
  }
  .overflow-left-status {
    width: 370px;
    margin: 0 auto;
  }
  .overflow-common-title {
    line-height: 25px;
    font-weight: normal;
    color: #2bdef5;
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    .title-before-dot {
      font-size: 0;
      vertical-align: text-top;
      width: 0;
      height: 0;
      border: 8px solid rgba(80, 227, 194, 0.6);
      border-color: transparent transparent transparent rgba(80, 227, 194, 0.6);
      margin-right: 6px;
      margin-left: 12px;
    }
  }
  .overview-wrap {
    background: linear-gradient(-140deg, transparent 2em, rgba(0, 0, 0, 0.5) 0);
    padding: 10px 10px;
    margin-top: 20px;
    position: relative;
  }
  .overflow-left-boxone {
    border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    .over-topline {
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
      margin-top: 4px;
    }
  }
  .overflow-left-boxthree {
    padding-bottom: 20px;
  }
}
$bgcolor: rgba(0, 0, 0, 0.6); //背景色
$textcolor: #fff; //字体色
#overview-mapmain {
  overflow: hidden;
  position: relative;
  width: 100%;
  .overview-mode-pannel {
    width: 100%;
    height: 100%;
    &.map-pannel-show {
      display: block;
    }
  }
  .overview-mode-pannel {
    width: 100%;
    .overview-mapset {
      width: 100%;
      height: 100%;
    }
  }
  .overflow-piechart {
    width: 100%;
    height: 160px;
  }
  .overflow-linechart {
    height: 170px;
  }
  .overflow-status-wrap {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    color: rgba(80, 227, 194, 0.6);
    font-family: PingFangSC-Medium;
    .overflow-status-item {
      text-align: center;
      flex: 1;
      .title {
        font-size: 14px;
        padding-bottom: 5px;
      }
      .count {
        font-size: 40px;
        font-family: "digital";
        text-shadow: 0px 0px 5px currentColor;
      }
    }
  }
  // 不同状态颜色样式调整
  .map-marker-wrapn {
    .bubble {
      margin-top: -50px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      .build-name {
        display: inline-block;
        white-space: nowrap;
        font-style: normal;
        color: #fff;
        padding: 5px 10px;
        background-color: #4ab7bd;
        border-radius: 2px;
        border: 1px solid #4ab7bd;
        min-width: 40px;
        font-size: 12px;
      }
      .arrow-up {
        border: 4px solid transparent;
        border-top-width: 4px;
        border-top-color: #4ab7bd;
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
      }
    }
    .main-map-markern {
      display: inline-block;
      width: 44px;
      height: 44px;
      color: transparent;
      font-size: 20px;
      text-align: center;
      line-height: 28px !important;
      position: relative;
      &.main-map-marker__notify {
        background: url("../../../assets/default-images/warning.png") no-repeat;
        background-size: cover !important;
        color: #fff;
      }
      &.main-map-marker__normaln {
        background: url("../../../assets/default-images/normal.png") no-repeat;
        background-size: cover !important;
        color: #fff;
      }
    }
    // 离线/报警/正常/故障图标颜色
    .hymain-map-marker {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #fff;
      position: relative;
      text-align: center;
      vertical-align: middle;
      .svg-icon {
        position: relative;
        top: 2px;
      }
      // 离线
      &.hymain-map-marker__normal {
        color: #90a1ab;
        background: #90a1ab;
      }
      // 报警
      &.hymain-map-marker__normal {
        color: #ff4545;
        background: #ff4545;
      }
      // 正常
      &.hymain-map-marker__green {
        color: #2ad797;
        background: #2ad797;
      }
      // 故障
      &.hymain-map-marker__yel {
        color: #2ad797;
        background: #ffaa00;
      }
      // 扩散动画
      &::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        left: -22px;
        top: -22px;
        border: 30px solid currentColor;
        border-radius: 30px;
        z-index: 1;
        opacity: 0;
        animation: warn 3s ease-out;
        animation-iteration-count: infinite;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.borderContent {
  width: 460px;
  height: auto;
  position: absolute;
  right: 45px;
  top: 120px;
  .borderContent_type {
    width: 460px;
    .border_message {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20px;
      .border_message_num {
        width: 180px;
        height: 87px;
      }
    }
  }

  .borderContent_bottom {
    width: 460px;
    margin-top: 20px;
    .border_message {
      width: 422px;
      height: 150px;
    }
    .border_message2 {
      width: 439px;
      height: 150px;
      margin-top: 20px;
      .borderType_title {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        color: #afdaf1;
        // font-weight: bold;
      }
    }
  }
}
</style>
